<nz-card *ngIf="isUILoad">
  <form nz-form #f="ngForm">
    <se-container col="3">
      <ng-container *ngFor="let item of simpleListFormFields.form!.fields; let i = index">
        <se [hidden]="i > 2 && !isCollapse" [label]="item.name">
          <ng-container [ngSwitch]="item.widget">
            <ng-container *ngSwitchCase="'date'">
              <ng-container [ngSwitch]="item.operator">
                <ng-container *ngSwitchCase="'betweenEquals'">
                  <nz-range-picker [(ngModel)]="queryParams.params[item.code!]" [name]="item.code!"></nz-range-picker>
                </ng-container>
                <ng-container *ngSwitchDefault>
                  <input
                    type="text"
                    [(ngModel)]="queryParams.params[item.code!]"
                    nz-input
                    [name]="item.code!"
                    (ngModelChange)="formValueChange(item.code!, $event)"
                  />
                </ng-container>
              </ng-container>
            </ng-container>
            <ng-container *ngSwitchCase="'number'">
              <ng-container [ngSwitch]="item.operator">
                <ng-container *ngSwitchCase="'betweenEquals'">
                  <nz-input-number
                    nz-input
                    placeholder="最小"
                    style="width: 100px; text-align: center"
                    [(ngModel)]="queryParams.params[item.code!][0]"
                    nz-input
                    [name]="item.code + '_min'"
                  ></nz-input-number>
                  <input
                    type="text"
                    disabled
                    nz-input
                    placeholder="~"
                    class="demo-input-split"
                    style="width: 30px; border-left: 0px; border-right: 0px; pointer-events: none; background-color: rgb(255, 255, 255)"
                  />
                  <nz-input-number
                    nz-input
                    placeholder="最大"
                    style="width: 100px; text-align: center"
                    class="demo-input-right"
                    [(ngModel)]="queryParams.params[item.code!][1]"
                    nz-input
                    [name]="item.code + '_max'"
                  ></nz-input-number>
                </ng-container>
                <ng-container *ngSwitchDefault>
                  <input
                    type="text"
                    [(ngModel)]="queryParams.params[item.code!]"
                    nz-input
                    [name]="item.code!"
                    (ngModelChange)="formValueChange(item.code!, $event)"
                  />
                </ng-container>
              </ng-container>
            </ng-container>

            <ng-container *ngSwitchCase="'radio'">
              <nz-radio-group
                [name]="item.code!"
                [(ngModel)]="queryParams.params[item.code!]"
                (ngModelChange)="formValueChange(item.code!, $event)"
              >
                <ng-container *ngFor="let o of options[item.format!][item.pattern!]">
                  <label *ngIf="o.enabled != 'N'" nz-radio [nzValue]="o.code">{{ o.text }}</label>
                </ng-container>
              </nz-radio-group>
            </ng-container>
            <ng-container *ngSwitchCase="'checkbox'">
              <ng-container *ngFor="let o of options[item.format!][item.pattern!]; let i = index">
                <label
                  *ngIf="o.enabled != 'N'"
                  [name]="item.code! + i"
                  [ngModel]="queryParams.params[item.code!].indexOf(o.code!) > -1"
                  nz-checkbox
                  [nzValue]="o.code"
                  (ngModelChange)="checkboxChange(item.code!, o.code, $event); formValueChange(item.code!, $event)"
                  >{{ o.text }}
                </label>
              </ng-container>
              <!-- <nz-checkbox-group [name]="item.code!" [ngModel]="[]" (ngModelChange)="formValueChange(item.code!, $event)">
              </nz-checkbox-group> -->
            </ng-container>

            <ng-container *ngSwitchCase="'select'">
              <nz-select
                [name]="item.code!"
                nzShowSearch
                nzAllowClear
                [nzMode]="['in', 'notIn'].indexOf(item.operator!) == -1 ? 'default' : 'tags'"
                [(ngModel)]="queryParams.params[item.code!]"
                (ngModelChange)="formValueChange(item.code!, $event)"
              >
                <ng-container *ngFor="let o of options[item.format!][item.pattern!]">
                  <nz-option *ngIf="o.enabled != 'N'" [nzLabel]="o.text!" [nzValue]="o.code"></nz-option>
                </ng-container>
              </nz-select>
            </ng-container>

            <ng-container *ngSwitchDefault>
              <input
                type="text"
                [(ngModel)]="queryParams.params[item.code!]"
                nz-input
                [name]="item.code!"
                (ngModelChange)="formValueChange(item.code!, $event)"
              />
            </ng-container>
          </ng-container>
        </se>
      </ng-container>
    </se-container>
    <se-container col="2">
      <se hideLabel="true" [labelWidth]="0">
        <ng-container *ngFor="let item of simpleListFormFields.action!.fields">
          <button *ngIf="isTrue(item.ifvar)" nz-button (click)="action(item.click)" [nzType]="'primary'" [acl]="item.acl!">
            {{ item.name }}
          </button>
        </ng-container>
      </se>
      <se [labelWidth]="0">
        <div style="text-align: right">
          <button nz-button [nzType]="'primary'" (click)="queryData()">查询</button>
          <button nz-button (click)="f.reset()">重置</button>
          <a class="collapse" (click)="isCollapse = !isCollapse" *ngIf="simpleListFormFields.form!.fields.length > 3">
            更多
            <i nz-icon [nzType]="isCollapse ? 'down' : 'up'"></i>
          </a>
        </div>
      </se>
    </se-container>
  </form>

  <nz-table
    [nzShowPagination]="queryParams.isPage"
    [nzShowSizeChanger]="queryParams.isPage"
    [nzData]="queryBody.list!"
    [nzLoading]="isDataLoad"
    [nzTotal]="queryBody.totalSize"
    [(nzPageSize)]="queryParams.pageSize!"
    [(nzPageIndex)]="queryParams.pageNumber!"
    (nzPageIndexChange)="queryData()"
    (nzPageSizeChange)="queryData()"
    (nzQueryParams)="(queryParams)"
    [nzScroll]="{ x: '1300px', y: '400px' }"
    resizable
  >
    <thead>
      <tr>
        <ng-container *ngFor="let item of simpleListFormFields.fields">
          <ng-container [ngSwitch]="item.type">
            <ng-container *ngSwitchCase="'checkbox'">
              <th
                [width]="item.width"
                [nzLeft]="item.fixed == 'left'"
                [nzRight]="item.fixed == 'right'"
                [nzChecked]="allChecked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="onAllChecked($event)"
              ></th>
            </ng-container>
            <ng-container *ngSwitchCase="'operate'">
              <th [width]="item.width" [nzLeft]="item.fixed == 'left'" [nzRight]="item.fixed == 'right'">
                {{ item.name }}
              </th>
            </ng-container>
            <ng-container *ngSwitchDefault>
              <th
                [width]="item.width"
                [nzLeft]="item.fixed == 'left'"
                [nzRight]="item.fixed == 'right'"
                [nzShowSort]="item.sortFlag == 'Y'"
                [(nzSortOrder)]="item.sortOrder"
                (nzSortOrderChange)="sortOrderChange(item)"
              >
                {{ item.name }}
              </th>
            </ng-container>
          </ng-container>
        </ng-container>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of queryBody.list">
        <ng-container *ngFor="let item of simpleListFormFields.fields">
          <ng-container [ngSwitch]="item.type">
            <ng-container *ngSwitchCase="'checkbox'">
              <td
                [nzLeft]="item.fixed == 'left'"
                [nzRight]="item.fixed == 'right'"
                [nzChecked]="setOfCheckedId.has(data.id)"
                [nzDisabled]="data.disabled"
                (nzCheckedChange)="onItemChecked(data.id, $event)"
              ></td>
            </ng-container>
            <ng-container *ngSwitchCase="'operate'">
              <td [nzLeft]="item.fixed == 'left'" [nzRight]="item.fixed == 'right'">
                <ng-container *ngFor="let actionField of item.action!.fields">
                  <a nz-button nzType="link" (click)="action(actionField.click, [data])">{{ actionField.name }}</a>
                </ng-container>
              </td>
            </ng-container>
            <ng-container *ngSwitchCase="'date'">
              <td [nzLeft]="item.fixed == 'left'" [nzRight]="item.fixed == 'right'">
                {{ data[item.code!] | date: (item.pattern ? item.pattern : 'yyyy-MM-dd') }}
              </td>
            </ng-container>
            <ng-container *ngSwitchCase="'keyValue'">
              <td [nzLeft]="item.fixed == 'left'" [nzRight]="item.fixed == 'right'">
                {{ getOption(item.format!, item.pattern!, data[item.code!]).text }}
              </td>
            </ng-container>
            <ng-container *ngSwitchDefault>
              <td [nzLeft]="item.fixed == 'left'" [nzRight]="item.fixed == 'right'">
                {{ data[item.code!] }}
              </td>
            </ng-container>
          </ng-container>
        </ng-container>
      </tr>
    </tbody>
  </nz-table>
</nz-card>
